<script>

var PropTxt = new Array();
PropTxt['TB_kitS'] = "Top Bar Properties";
PropTxt['M_kitS'] = "CoverFlow Properties";
PropTxt['BB_kitS'] = "Bottom Bar Properties";

var SelectedBar = "TB";

function aff_div( div_key ){
//alert( SelectedBar )
	$("#div_TB").css("display","none");
	$("#div_M").css("display","none");
	$("#div_BB").css("display","none");
	
	$("#div_" + div_key).css("display","inline-block");
	
	$("#" + div_key + "_kitS_LA_anim").css("display","none");
	$("#" + SelectedBar + "_kitS_LA_fix").css("display","none");
	
	SelectedBar = div_key;
	$("#" + SelectedBar + "_kitS_LA_fix").css("display","block");
	//alert( SelectedBar )
	return false;
}
function aff_childTB( div_name ){
	if( $('#' + div_name).css('display') == 'block'){
		return;
	}		
	else{
		$("#div_TBlogo").css("display","none");
		$("#div_TBShadow").css("display","none");
		$("#div_TBbck").css("display","none");
		
		$("#div_TBlogoTab").removeClass("active");
		$("#div_TBShadowTab").removeClass("active");
		$("#div_TBbckTab").removeClass("active");
		
		$("#" + div_name).css("display","block");
		$("#" + div_name + "Tab").addClass("active");
	}
	return false;
}
function aff_childBB( div_name ){
	if( $('#' + div_name).css('display') == 'block')
		return;
	else{
		$("#div_BBbck").css("display","none");
		$("#div_BBShadow").css("display","none");
		$("#div_BBbut").css("display","none");
		
		$("#div_BBbckTab").removeClass("active");
		$("#div_BBShadowTab").removeClass("active");
		$("#div_BBbutTab").removeClass("active");
		
		$("#" + div_name).css("display","block");
		$("#" + div_name + "Tab").addClass("active");		
	}
	return false;
}

function aff_childBB_ButRef( div_name ){
	if( $('#' + div_name).css('display') == 'block')
		return;
	else{
		$("#div_BBbutRefType1").css("display","none");
		$("#div_BBbutRefType2").css("display","none");
		$("#div_BBbutRefType3").css("display","none");
		$("#div_BBbutRefType4").css("display","none");
		
		$("#div_BBbutRefType1Tab").removeClass("active");
		$("#div_BBbutRefType2Tab").removeClass("active");
		$("#div_BBbutRefType3Tab").removeClass("active");
		$("#div_BBbutRefType4Tab").removeClass("active");
		
		$("#" + div_name).css("display","block");
		$("#" + div_name + "Tab").addClass("active");		
	}
	return false;
}

function aff_childBB_ButInfo( div_name ){
	if( $('#' + div_name).css('display') == 'block')
		return;
	else{
		$("#div_BBbutInfoType1").css("display","none");
		$("#div_BBbutInfoType2").css("display","none");
		$("#div_BBbutInfoType3").css("display","none");
		$("#div_BBbutInfoType4").css("display","none");
		
		$("#div_BBbutInfoType1Tab").removeClass("active");
		$("#div_BBbutInfoType2Tab").removeClass("active");
		$("#div_BBbutInfoType3Tab").removeClass("active");
		$("#div_BBbutInfoType4Tab").removeClass("active");
		
		$("#" + div_name).css("display","block");
		$("#" + div_name + "Tab").addClass("active");		
	}
	return false;
}

function aff_childM( div_name ){
	if( $('#' + div_name).css('display') == 'block')
		return;
	else{
		$("#div_Mbck").css("display","none");
		$("#div_Marrow").css("display","none");
		
		$("#div_MbckTab").removeClass("active");
		$("#div_MarrowTab").removeClass("active");
		
		$("#" + div_name).css("display","block");
		$("#" + div_name + "Tab").addClass("active");		
	}
	return false;
}

function kitS_rollOver( div_id ){
	if( div_id == SelectedBar + "_kitS" )
		return
	//_LA_anim

	document.getElementById( div_id+"_LA_anim" ).style.display='block';
	//document.getElementById( SelectedBar+"_kitS_LA_fix" ).style.display='none';
	document.getElementById( "div_selectedBar" ).innerHTML=PropTxt[ div_id ];
	document.getElementById( "div_selectedBar" ).style.color='#999999';

	//div_selectedBar
}

function kitS_rollOut( div_id ){
	if( div_id == SelectedBar+"_kitS" )
		return
	//_LA_anim

	document.getElementById( div_id+"_LA_anim" ).style.display='none'
	//document.getElementById( SelectedBar+"_kitS_LA_fix" ).style.display='block';
	document.getElementById( "div_selectedBar" ).innerHTML=PropTxt[ SelectedBar+"_kitS" ];
	document.getElementById( "div_selectedBar" ).style.color='#fff';
}

function ajaxUpload( file , type ){
													//alert( file.name )
													// following line is not necessary: prevents running on SitePoint servers

											
												var formData = new FormData();
												formData.append('file', file);

												var xhr = new XMLHttpRequest();
												
												xhr.onreadystatechange = function() {
														if (xhr.readyState == 4 && xhr.status == 200) {                
																document.getElementById("div_"+type+"_upload").innerHTML = xhr.responseText;
														}
												}
												xhr.open('POST', "upload.php?ajax=1&type="+type, true);
//												xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

												xhr.send( formData );

													

												
												}



</script>

<style>
#div_TBlogo center a img{
	height:50px;
	margin:0 10px 0 10px;
}
#div_TBlogo center a div *{
	display:inline
}
a#TB_kitS{
	position:relative;
	background:<? echo $PROJ->TB_bckCol ?> ;
	background-image:url('<? echo $PROJ->TB_bckImg ?>' );
   /* fallback/image non-cover color */


      /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, <? echo $PROJ->TB_bckGrad1 ?>, <? echo $PROJ->TB_bckGrad2 ?>);
   
   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, <? echo $PROJ->TB_bckGrad1 ?>, <? echo $PROJ->TB_bckGrad2 ?>); 
 
   /* IE 10+ */
   background-image: -ms-linear-gradient(top, <? echo $PROJ->TB_bckGrad1 ?>, <? echo $PROJ->TB_bckGrad2 ?>);

   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, <? echo $PROJ->TB_bckGrad1 ?>, <? echo $PROJ->TB_bckGrad2 ?>);
   
   /* Safari 4+, Chrome 1-9 */
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(<? echo $PROJ->TB_bckGrad1 ?>), to(<? echo $PROJ->TB_bckGrad2 ?>));



/*	'0px 5px 3px 1px #222';*/
}
a#TB_kitS TD{
	text-align:<? echo $PROJ->TB_logo_align ?>;
}
a#M_kitS{
	background:<? echo $PROJ->M_bckCol ?> ;
	background-image:url('<? echo $PROJ->M_bckImg ?>' );
	   /* fallback/image non-cover color */


      /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, <? echo $PROJ->M_bckGrad1 ?>, <? echo $PROJ->M_bckGrad2 ?>);
   
   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, <? echo $PROJ->M_bckGrad1 ?>, <? echo $PROJ->M_bckGrad2 ?>); 
 
   /* IE 10+ */
   background-image: -ms-linear-gradient(top, <? echo $PROJ->M_bckGrad1 ?>, <? echo $PROJ->M_bckGrad2 ?>);

   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, <? echo $PROJ->M_bckGrad1 ?>, <? echo $PROJ->M_bckGrad2 ?>);
   
   /* Safari 4+, Chrome 1-9 */
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(<? echo $PROJ->M_bckGrad1 ?>), to(<? echo $PROJ->M_bckGrad2 ?>));


}
a#BB_kitS{
	background:<? echo $PROJ->BB_bckCol ?> ;
	background-image:url('<? echo $PROJ->BB_bckImg ?>' );
	   /* fallback/image non-cover color */


      /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, <? echo $PROJ->BB_bckGrad1 ?>, <? echo $PROJ->BB_bckGrad2 ?>);
   
   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, <? echo $PROJ->BB_bckGrad1 ?>, <? echo $PROJ->BB_bckGrad2 ?>); 
 
   /* IE 10+ */
   background-image: -ms-linear-gradient(top, <? echo $PROJ->BB_bckGrad1 ?>, <? echo $PROJ->BB_bckGrad2 ?>);

   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, <? echo $PROJ->BB_bckGrad1 ?>, <? echo $PROJ->BB_bckGrad2 ?>);
   
   /* Safari 4+, Chrome 1-9 */
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(<? echo $PROJ->BB_bckGrad1 ?>), to(<? echo $PROJ->BB_bckGrad2 ?>));


	
}

</style>



<center>
		<form action="<?php echo site_url('index/save')?>" method=post id=myForm enctype="multipart/form-data" >
			<input type=hidden name=f_name value=project />
			<input type=hidden name=redir value=myproject />
			<input type=hidden name=project_id value='<? echo $PROJ->project_id ?>' />
			
			
			<input type=hidden name=TB_logoImg value='<? echo $PROJ->TB_logoImg ?>' />
			<input type=hidden name=TB_bckCol value='<? echo $PROJ->TB_bckCol ?>' />
			<input type=hidden name=TB_bckGrad1 value='<? echo $PROJ->TB_bckGrad1 ?>' />
			<input type=hidden name=TB_bckGrad2 value='<? echo $PROJ->TB_bckGrad2 ?>' />
			<input type=hidden name=TB_bckImg value='<? echo $PROJ->TB_bckImg ?>' />
			<input type=hidden name=TB_logo_align value='<? echo $PROJ->TB_logo_align ?>' />
			<input type=hidden name=TB_shadow value='<? echo $PROJ->TB_shadow ?>' />
			
			<input type=hidden name=M_bckCol value='<? echo $PROJ->M_bckCol ?>' />
			<input type=hidden name=M_bckGrad1 value='<? echo $PROJ->M_bckGrad1 ?>' />
			<input type=hidden name=M_bckGrad2 value='<? echo $PROJ->M_bckGrad2 ?>' />
			<input type=hidden name=M_bckImg value='<? echo $PROJ->M_bckImg ?>' />

			<input type=hidden name=BB_bckCol value='<? echo $PROJ->BB_bckCol ?>' />
			<input type=hidden name=BB_bckGrad1 value='<? echo $PROJ->BB_bckGrad1 ?>' />
			<input type=hidden name=BB_bckGrad2 value='<? echo $PROJ->BB_bckGrad2 ?>' />
			<input type=hidden name=BB_bckImg value='<? echo $PROJ->BB_bckImg ?>' />
			<input type=hidden name=BB_shadow value='<? echo $PROJ->BB_shadow ?>' />
			<input type=hidden name=BB_RefButImg value='<? echo $PROJ->BB_RefButImg ?>' />
			<input type=hidden name=BB_InfoButImg value='<? echo $PROJ->BB_InfoButImg ?>' />
			<input type=hidden name=BB_dlButImg value='<? echo $PROJ->BB_dlButImg ?>' />
			
		
<?
//echo "<pre>";print_r( $this->session->all_userdata() );

$checkedTBShadow="";
$loadTBShadow="";
if( $PROJ->TB_shadow != "" ){
	$checkedTBShadow = "checked";
	// contourning a bug that make an existing shadow declared in CSS impossible to erase
	// => the script : document.getElementById( a_id ).style.boxShadow=''; as no effect if the shadow is declared in the CSS styleSheet.
	$loadTBShadow="aff_shadow1( 'TB_kitS' , 'TB_shadow' )";
	}
// samesame for the bottombar shadow
$checkedBBShadow="";
$loadBBShadow="";
if( $PROJ->BB_shadow != "" ){
	$checkedBBShadow = "checked";
	// contourning a bug that make an existing shadow declared in CSS impossible to erase
	// => the script : document.getElementById( a_id ).style.boxShadow=''; as no effect if the shadow is declared in the CSS styleSheet.
	$loadBBShadow="aff_shadow( 'BB_kitS' , 'BB_shadow' )";
	}




?>
<table border=0 style="width:100%" cellspacing=0 cellpadding=0 >

	<tr>
		<td width=30% align=center style="vertical-align:top;">
		<!-- ***********************************************************************-->
		<!-- ***********************************************************************-->
		<!-- begining of the left cell with the Iphone like preview -->
		<!-- ***********************************************************************-->
		<!-- ***********************************************************************-->
		
		
			<div id=displayKitSmall >
						
			<table cellspacing=0 cellpadding=0 border=0 >
			<TR>
				<TD rowspan=5 >
				<img border=0 src=<?php echo base_url()?>public/images/www/device/dev_1/dev_1_left.png style="z-index:100;height:517px;margin-right:0px;margin-top:1px" />
				</TD>
				<td>
					<img border=0 src=<?php echo base_url()?>public/images/www/device/dev_1/dev_1_top.png style="position:relative;z-index:100;width:248px" />
				</td>
				<TD rowspan=5>
					<img border=0 src=<?php echo base_url()?>public/images/www/device/dev_1/dev_1_right.png style="position:relative;z-index:100;height:516px;margin-top:0px" />
				</TD>
				<td width=100>
				&nbsp;
				</td>
			</tr>
			<tr>
	
				<td>
				
				<a id=TB_kitS href='#' onclick="aff_div('TB');return false;" 
						onmouseover="kitS_rollOver( 'TB_kitS' )"
						onmouseout="kitS_rollOut( 'TB_kitS' )"
						
						style="" >
					
					<table style="height:100%;width:100%;" id=table_logo_TB_kitS >
						<tr>
							<td id=td_TB_kitS_prev_left style="padding:0 30px 0 30px" valign=middle >
								<img src=<?php echo base_url()?>public/images/<? echo  $PROJ->TB_logoImg ? $PROJ->TB_logoImg.'"' : 'logo/default.png"';?> height=50 id=logo_img>
							
						
							</td>
						</tr>
					</table>
					
				
				</a>
				</td>
				<td>
				<img src=<?php echo base_url()?>public/images/www/leftArrow.gif id=TB_kitS_LA_anim style="Display:none" />
				<img src=<?php echo base_url()?>public/images/www/left_Arrow.gif width=60 id=TB_kitS_LA_fix style="Display:block" />
				</td>
				</tr>
				
				<tr>
				<td>
	
				
				<a id=M_kitS href='#' onclick="aff_div('M');return false;" style="z-index:0" 
						onmouseover="kitS_rollOver( 'M_kitS' )"
						onmouseout="kitS_rollOut( 'M_kitS' )"
						
				>
				
				</a>
			
				</td>
				<td>
				<img src=<?php echo base_url()?>public/images/www/leftArrow.gif id=M_kitS_LA_anim style="Display:none" />
				<img src=<?php echo base_url()?>public/images/www/left_Arrow.gif width=60 id=M_kitS_LA_fix style="Display:none" />
				</td>
				</tr>
				
				
				<tr>
				<td >
				<a id=BB_kitS href='#' onclick="aff_div('BB');return false;"
						onmouseover="kitS_rollOver( 'BB_kitS' )"
						onmouseout="kitS_rollOut( 'BB_kitS' )"
						
				>
						<table width=100% height=100% >
							<tr>
							
							<td width=25% align=center ><img id=but_refresh width=50 src="<? echo $PROJ->BB_RefButImg ?>" /></td>
								<td width=50% align=center ><img id=but_dl width=150 src="<? echo $PROJ->BB_dlButImg ?>" /></td>
								<td width=25% align=center ><img id=but_info width=50 src="<? echo $PROJ->BB_InfoButImg ?>" /></td>

<!--							
								<td width=25% align=center ><img id=but_refresh width=50 src="images/button/refresh/download.jpg" /></td>
								<td width=50% align=center ><img id=but_dl width=150 src="images/button/dlRead/images.jpg" /></td>
								<td width=25% align=center ><img id=but_info width=50 src="images/button/info/download.jpg" /></td>
-->
							</tr>
						</table>
				</a>
				
		</TD>
						<td>
				<img src=<?php echo base_url()?>public/images/www/leftArrow.gif id=BB_kitS_LA_anim style="Display:none" />
				<img src=<?php echo base_url()?>public/images/www/left_Arrow.gif width=60 id=BB_kitS_LA_fix style="Display:none" />
				</td>

</tr>
<tr>
	
	<td><img border=0 src=<?php echo base_url()?>public/images/www/device/dev_1/dev_1_bottom.png style="position:relative;z-index:100;;margin-top:-2px;width:248px" /></td>
				
	<td>&nbsp;
	</td>
</tr>

</Table>
				
				
			</div>
		
		<!-- ***********************************************************************-->
		<!-- ***********************************************************************-->
		<!--  end of the left side cell (with the preview of the IPhone4-like device -->
		<!-- ***********************************************************************-->
		<!-- ***********************************************************************-->

		</td>
		<td width=70% align=left valign=top>
		<!-- ***********************************************************************-->
		<!-- ***********************************************************************-->
		<!-- begining of the right cell with the editable content -->
		<!-- ***********************************************************************-->		
		<!-- ***********************************************************************-->
        
			<div id=div_details class="bottom collapse-bottom" style="bottom: 0px; top: 142px;">
				<!--h3 id=div_selectedBar >
					Top Bar Properties
				</h3-->
				<div id=div_TB style="display:block" >
					<div class="tabarea border-corner-2-all">
						<div class="tab-header">
							<h3>Top Bar Properties</h3>
							<ul class="selector">
								<li id=div_TBlogoTab class="border-corner-2-top active" onclick="aff_childTB( 'div_TBlogo' );return false;">Logo</li>
								<li id=div_TBbckTab class="border-corner-2-top" onclick="aff_childTB( 'div_TBbck' );return false;">Background</li>
								<li id=div_TBShadowTab class="border-corner-2-top" onclick="aff_childTB( 'div_TBShadow' );return false;">Shadow</li>
							</ul>
						</div>
						<div class="tab-content">
							<div id=div_TBlogo style='display:block' >
								<center>
									&nbsp;
									<table >
										<tr>
										<td>
											
												<div id=div_logo_upload class=div_thumbContent >
												<script>
												function TB_kitS_logo( img ){
														//alert( img );
														document.getElementById( 'logo_img' ).src=img;
														myForm.TB_logoImg.value = img;
												}
												
												</script>
												
												<?
											
												aff_texture( APPPATH . "../public/images/" . $this->session->userdata('filePath' ) . "logo/","TB_kitS_logo" );
												//$_GET[ 'type' ] = 'logo';
												
												
												$tmpPath = "logo/";
												$tmpKey = "div_TBlogo";
												$callBack = "TB_kitS_logo";
												
												include( 'upload2.php' );
												
												
												
												?>
												
												</div>

										</td>

										</tr>
									</table>

									<script>
										function logo_align( align ){
												//document.getElementById( 'TB_kitS' ).style.textAlign=align;
												document.getElementById( 'td_TB_kitS_prev_left' ).style.textAlign=align;
										
												myForm.TB_logo_align.value = align;
										
												//alert( align )
										
								
										}
									</script>
									<a href='#' onclick="logo_align( 'left' );return false;" ><img src=<?php echo base_url()?>public/images/www/left-align-icon.png /></a>
									<a href='#' onclick="logo_align('center');return false;" ><img src=<?php echo base_url()?>public/images/www/center-icon.png /></a>
									<a href='#' onclick="logo_align('right');return false;" ><img src=<?php echo base_url()?>public/images/www/right-align-icon.png /></a>
								</center>
							</div>
						
							<!-- SECOND TAB TB: BACKGROUND -->
							<div id=div_TBbck style='display:none;' >
								<script type="text/javascript">
									$(function() {
										var $items = $('#vtabTBbck>ul>li');
										$items.click(function() {
											$items.removeClass('selected');
											$(this).addClass('selected');

											var index = $items.index($(this));
											$('#vtabTBbck>div').hide().eq(index).show();
										}).eq(1).click();
									});
								</script>
								<div id="vtabTBbck" class="vtab">
									<ul>
										<li class="selected">Color</li>
										<li class="">Gradient</li>
										<li class="">Texture</li>
									</ul>
									<div>
                                        <h4>Color</h4>
										<?
											create_colPicker( "TB_kitS_color" , $PROJ->TB_bckCol , '' );
										?>
										<script>
											//TB_bckCol<br />
											function TB_kitS_color( col ){
										
												document.getElementById( 'TB_kitS' ).style.background = col;
												myForm.TB_bckCol.value = col;
												myForm.TB_bckImg.value = '';
												myForm.TB_bckGrad1.value = '';
												myForm.TB_bckGrad2.value = '';
												
											}
										</script>
									</div>
									<div>
                                        <h4>Gradient</h4>
										<script>
										function TB_kitS_grad( col1 , col2 , bck ){
											//alert( bck )
											document.getElementById( 'TB_kitS' ).style.background = bck;
											myForm.TB_bckGrad1.value = col1;
											myForm.TB_bckGrad2.value = col2;
											
										}
										
										</script>
										<?
										create_gradient( "TB_kitS_grad" , $PROJ->TB_bckGrad1 , $PROJ->TB_bckGrad2 );
											//create_colPicker( "TB_kitS_Grad1" , $PROJ->TB_bckCol,'2' );
											//create_colPicker( "TB_kitS_Grad2" , $PROJ->TB_bckCol,'2' );
										?>
									</div>
									<div id=div_TB_kitSbck_texture class=div_thumbContent>
										
                                        <h4  >Texture</h4>
										<style>
											#div_TB_kitSbck_texture a img{
												height:50px !important;
												
											}
										</style>
										<?
											aff_texture( APPPATH . "../public/images/textures/" , "TB_kitS_img" );
											aff_texture( APPPATH . "../public/images/" . $this->session->userdata('filePath' ) . "texture/", "TB_kitS_img" );
												//$_GET[ 'type' ] = 'logo';
												$tmpPath = "texture/";
												$tmpKey = "div_TBbck";
												$callBack = "TB_kitS_img";
												
												include( 'upload2.php' );
										?>
										<script>
											//TB_bckCol<br />
											function TB_kitS_img( img ){ 
												document.getElementById( 'TB_kitS' ).style.backgroundImage = "url('"+img+"')";
												myForm.TB_bckImg.value = img;
												myForm.TB_bckGrad1.value = '';
												myForm.TB_bckGrad2.value = '';
												
											}
										</script>
									</div>
								</div>
							</div >
							<!-- THIRD TAB TB: SHADOW -->
							<div id=div_TBShadow style='display:none;' >
									<input type=checkBox <? echo $checkedTBShadow ?>  onclick="aff_shadow1( 'TB_kitS' , 'TB_shadow' )" value="bottom shadow." />
									<script>
									<? echo $loadTBShadow  ?>;
									function aff_shadow1( a_id , I_input  ){
									//alert('fdhfgh')
								
									//alert( document.getElementById( a_id ).style.boxShadow );

										if( document.getElementById( a_id ).style.boxShadow == '' )
										{
											//alert( " EMPTY" +document.getElementById( a_id ).style.boxShadow );
											document.getElementById( a_id ).style.boxShadow = '0px 5px 3px 1px #222';
											}
										else{ 
										//alert( "SHADOW NOT EMPTY" + document.getElementById( a_id ).style.boxShadow );
										document.getElementById( a_id ).style.boxShadow='';
								
										}
							
										myForm.TB_shadow.value = document.getElementById( a_id ).style.boxShadow;
										//alert( "FROM:" + myForm.TB_shadow.value );
									}
							
							
							
									</script>
							
									TP_shadow
									<br />
									<br />
									<br />
									<br />
							</div>
						</div>
					</div>
				</div>
				
				<div id=div_M style="display:none">
					<div class="tabarea border-corner-2-all">
						<div class="tab-header">
							<h3>CoverFlow Properties</h3>
							<ul class="selector">
								<li id=div_MarrowTab class="border-corner-2-top active" onclick="aff_childM( 'div_Marrow' );return false;">Arrow</li>
								<li id=div_MbckTab class="border-corner-2-top" onclick="aff_childM( 'div_Mbck' );return false;">Background</li>
							</ul>
						</div>
						<div class="tab-content">
							<div id=div_Mbck style='display:none;' >
								<script type="text/javascript">
									$(function() {
										var $items = $('#vtabMbck>ul>li');
										$items.click(function() {
											$items.removeClass('selected');
											$(this).addClass('selected');

											var index = $items.index($(this));
											$('#vtabMbck>div').hide().eq(index).show();
										}).eq(1).click();
									});
								</script>
								<div id="vtabMbck" class="vtab">
									<ul>
										<li class="selected">Color</li>
										<li class="">Gradient</li>
										<li class="">Texture</li>
									</ul>
									<div>
                                        <h4>Color</h4>
										<?
											create_colPicker( "M_kitS_color" , $PROJ->M_bckCol,'' );
										?>
										<script>
											//TB_bckCol<br />
											function M_kitS_color( col ){
										
												document.getElementById( 'M_kitS' ).style.background = col;
												myForm.M_bckCol.value = col;
												myForm.M_bckImg.value = '';
												myForm.M_bckGrad1.value = '';
												myForm.M_bckGrad2.value = '';
											}
										</script>
									</div>
									<div>
                                        <h4>Gradient</h4>
										<script>
										
										function M_kitS_grad( col1 , col2 , bck ){
											//alert( bck )
											document.getElementById( 'M_kitS' ).style.background = bck;
											myForm.M_bckGrad1.value = col1;
											myForm.M_bckGrad2.value = col2;
											
										}
										</script>
										<?
										create_gradient( "M_kitS_grad" , $PROJ->M_bckCol , $PROJ->M_bckCol );
											//create_colPicker( "TB_kitS_Grad1" , $PROJ->TB_bckCol,'2' );
											//create_colPicker( "TB_kitS_Grad2" , $PROJ->TB_bckCol,'2' );
										?>
									</div>
									<div id=div_M_kitSbck_texture class=div_thumbContent>
                                        <h4>Texture</h4>
										<style>
											#div_M_kitSbck_texture a img{
												height:50px !important;
												
											}
										</style>
										<?
											aff_texture( APPPATH . "../public/images/textures/" , "M_kitS_img" );
											aff_texture( APPPATH . "../public/images/" . $this->session->userdata('filePath' ) . "texture/", "M_kitS_img" );
												//$_GET[ 'type' ] = 'logo';
												$tmpPath = "texture/";
												$tmpKey = "div_Mbck";
												$callBack = "M_kitS_img";
												
												include( 'upload2.php' );
										?>
										<script>
											//M_bckCol<br />
											function M_kitS_img( img ){ 
												document.getElementById( 'M_kitS' ).style.backgroundImage = "url('"+img+"')";
												myForm.M_bckImg.value = img;
												myForm.M_bckGrad1.value = '';
												myForm.M_bckGrad2.value = '';
									
												return false;
											}
										</script>
									</div>
								</div>
							</div>
				
							<div id=div_Marrow style='display:block' >
								M_arrow<br />
							</div>
							<div class="clear"></div>
						</div>
					</div>
				</div>
				
				<div id=div_BB style="display:none">
					<div class="tabarea border-corner-2-all">
						<div class="tab-header">
							<h3>Bottom Bar Properties</h3>
							<ul class="selector">
								<li id=div_BBbutTab class="border-corner-2-top active" onclick="aff_childBB( 'div_BBbut' );return false;">Buttons</li>
								<li id=div_BBbckTab class="border-corner-2-top" onclick="aff_childBB( 'div_BBbck' );return false;">Background</li>
								<li id=div_BBShadowTab class="border-corner-2-top" onclick="aff_childBB( 'div_BBShadow' );return false;">Shadow</li>
							</ul>
						</div>
						<div class="tab-content">				
							<div id=div_BBbut style='display:block;clear:both' >
								<script type="text/javascript">
									$(function() {
										var $items = $('#vtabBBbut>ul>li');
										$items.click(function() {
											$items.removeClass('selected');
											$(this).addClass('selected');

											var index = $items.index($(this));
											$('#vtabBBbut>div').hide().eq(index).show();
										}).eq(1).click();
									});
								</script>
								
								
								
								<div id="vtabBBbut" class="vtab">
									<ul>
										<li class="selected">Refresh</li>
										<li class="">Read more</li>
										<li class="">Info</li>
									</ul>
									
									
									<div id=div_BButRef >
										<h4>Refresh buttons</h4>
											
												<div style="float:left;clear:both" /><?  aff_texture( APPPATH . '../public/images/button/refresh/type1/' , 'BB_kitS_but_ref' ); ?></div >
													<div style="float:left;clear:both" /><?  aff_texture( APPPATH . '../public/images/button/refresh/type2/' , 'BB_kitS_but_ref' ); ?></div >													
													<div style="float:left;clear:both" /><?  aff_texture( APPPATH . '../public/images/button/refresh/type3/' , 'BB_kitS_but_ref' ); ?></div >												
												<div style="float:left;clear:both" /><?  aff_texture( APPPATH . '../public/images/button/refresh/type4/' , 'BB_kitS_but_ref' ); ?></div >													
													
												<script>
													//TB_bckCol<br />
													function BB_kitS_but_ref( img ){ 
														document.getElementById( 'but_refresh' ).src = img;
														myForm.BB_RefButImg.value = img;
													}
												</script>
										
																		
									</div>

									<div id=div_BButDL style="displaY:none" >
										<h4>Read more buttons</h4>
										<?
											aff_texture( APPPATH . "../public/images/button/dlRead/" , "BB_kitS_but_dl" );
										?>
										<script>
											//TB_bckCol<br />
											function BB_kitS_but_dl( img ){ 
												document.getElementById( 'but_dl' ).src = img;
												myForm.BB_dlButImg.value = img;
												myForm.BB_bckGrad1.value = col1;
												myForm.BB_bckGrad2.value = col2;
											}
										</script>
									</div>
									<div id=div_BButInfo style="display:none" >
										<h4>Info buttons</h4>
										<div class="tabarea border-corner-2-all" id="assigment">
											<div class="tab-header">
												<ul class="selector">
													<li id=div_BBbutInfoType1Tab class="border-corner-2-top active" onclick="aff_childBB_ButInfo( 'div_BBbutInfoType1' );return false;">Type1</li>
													<li id=div_BBbutInfoType2Tab class="border-corner-2-top" onclick="aff_childBB_ButInfo( 'div_BBbutInfoType2' );return false;">Type2</li>
													<li id=div_BBbutInfoType3Tab class="border-corner-2-top" onclick="aff_childBB_ButInfo( 'div_BBbutInfoType3' );return false;">Type3</li>
													<li id=div_BBbutInfoType4Tab class="border-corner-2-top" onclick="aff_childBB_ButInfo( 'div_BBbutInfoType4' );return false;">Type4</li>		
												</ul>
											</div>
										<div class="tab-content">
												<div id=div_BBbutInfoType1 class=div_thumbContent>
										
													<?  aff_texture( APPPATH . '../public/images/button/info/type1/' , 'BB_kitS_but_info' ); ?>	
											
												</div>
												<div id=div_BBbutInfoType2 style='display:none' >
													<?  aff_texture( APPPATH . '../public/images/button/info/type2/' , 'BB_kitS_but_info' ); ?>													
												</div>
												<div id=div_BBbutInfoType3 style='display:none;' >
													<?  aff_texture( APPPATH . '../public/images/button/info/type3/' , 'BB_kitS_but_info' ); ?>													
												</div>
												<div id=div_BBbutInfoType4 style='display:none;' >
													<?  aff_texture( APPPATH . '../public/images/button/info/type4/' , 'BB_kitS_but_info' ); ?>													
												</div>
										<?
											//aff_texture( APPPATH . "../public/images/button/info/" , "BB_kitS_but_info" );
										?>
										<script>
											//TB_bckCol<br />
											function BB_kitS_but_info( img ){ 
												document.getElementById( 'but_info' ).src = img;
												myForm.BB_InfoButImg.value = img;
												myForm.BB_bckGrad1.value = col1;
												myForm.BB_bckGrad2.value = col2;
											}
										</script>
										</div>
									</div>
								</div>
							</div>
							</div>
							<div id=div_BBbck style='display:none' >
								<script type="text/javascript">
									$(function() {
										var $items = $('#vtabBBBck>ul>li');
										$items.click(function() {
											$items.removeClass('selected');
											$(this).addClass('selected');

											var index = $items.index($(this));
											$('#vtabBBBck>div').hide().eq(index).show();
										}).eq(1).click();
									});
								</script>
								<div id="vtabBBBck" class="vtab">
									<ul>
										<li class="selected">Color</li>
										<li>Gradient</li>
										<li>Texture</li>
									</ul>
								
								<div >
										<h4>Color</h4>
										<?
										create_colPicker( "BB_kitS_color" , $PROJ->BB_bckCol,'1' );
										?>
										<script>
										//BB_bckCol<br />
										function BB_kitS_color( col ){ 
											document.getElementById( 'BB_kitS' ).style.background = col;
											myForm.BB_bckCol.value = col;
											myForm.BB_bckImg.value = '';
											myForm.BB_bckGrad1.value = '';
											myForm.BB_bckGrad2.value = '';
											return false;
										}
										</script>
								</div>
									<div style="display:none"  >
										<h4>Gradient</h4>
										<script>
										
										function BB_kitS_grad( col1 , col2 , bck ){
											//alert( bck )
											document.getElementById( 'BB_kitS' ).style.background = bck;
											myForm.BB_bckGrad1.value = col1;
											myForm.BB_bckGrad2.value = col2;
											
										}
										</script>
										<?
										create_gradient( "BB_kitS_grad" , $PROJ->BB_bckCol , $PROJ->BB_bckCol );
											//create_colPicker( "TB_kitS_Grad1" , $PROJ->TB_bckCol,'2' );
											//create_colPicker( "TB_kitS_Grad2" , $PROJ->TB_bckCol,'2' );
										?>
									</div>
									<div id=div_BB_kitSbck_texture class=div_thumbContent style="display:none" >
                                        <h4>Texture</h4>
										<style>
											#div_BB_kitSbck_texture a img{
												height:50px !important;
												
											}
										</style>
										<?
											aff_texture( APPPATH . "../public/images/textures/" , "BB_kitS_img" );
											aff_texture( APPPATH . "../public/images/" . $this->session->userdata('filePath' ) . "texture/", "BB_kitS_img" );
												//$_GET[ 'type' ] = 'logo';
												$tmpPath = "texture/";
												$tmpKey = "div_BBbck";
												$callBack = "BB_kitS_img";
												
												include( 'upload2.php' );
										?>
										
										<script>
											//TB_bckCol<br />
											function BB_kitS_img( img ){ 
												document.getElementById( 'BB_kitS' ).style.backgroundImage = "url('"+img+"')";
												myForm.BB_bckImg.value = img;
												myForm.TB_bckGrad1.value = '';
												myForm.TB_bckGrad2.value = '';
												return false;
											}
										</script>
									</div>
								</div>
							</div>
					
							<div id=div_BBShadow style='display:none' >
								<input type=checkBox <? echo $checkedBBShadow ?> onclick="aff_shadow( 'BB_kitS' , 'BB_shadow' )" /> Top shadow.
								<script>
								<? echo $loadBBShadow  ?>;
									function aff_shadow( a_id , I_input  ){
									if( document.getElementById( a_id ).style.boxShadow == '' )
									{
										document.getElementById( a_id ).style.boxShadow='0px -5px 3px 1px #222';
										}
									else{ document.getElementById( a_id ).style.boxShadow='';}
									
									myForm.BB_shadow.value = document.getElementById( a_id ).style.boxShadow;
								}
								</script>
								
								BB_shadow<br />
							</div>
						</div>
					</div>
			</div>	
		
		</td>
	
	<tr>

</table>

    <input class="pc-button save blue" type="submit" value="Submit">
	<!-- <input type=submit style="margin-top:50px;border-round:15px;font-size:25px;width:550px" /> -->
		</form>


</center>



<?





















?>